<template>
    <view class="serach-wrap">
      <!-- 搜索条 -->
      <view class="grace-gradient-bg" style="width:100%;  flex-wrap:nowrap;">
        <view class="grace-search">
          <view class="grace-iconfont icon-arrow-left fs40" @click="handleBack"></view>
          <view class="grace-search-in">
            <view class="grace-search-icon"></view>
            <input type="text" @input="searchChange" @confirm="searchNow" :value="searchKey" placeholder="搜索" focus="true">
            <view class="grace-search-icon grace-search-clear" @tap="clearKey" v-if="searchClose"></view>
          </view>
          <view class="search">搜索</view>
        </view>
      </view>
      <view class="content">
        <!-- 搜索历史 -->
        <view>
          <view class="grace-title grace-nowrap grace-space-between">
            <view class="grace-h5">搜索历史</view>
            <view class="grace-more-r grace-search-remove"></view>
          </view>
          <view class="grace-tips">
            <view>关键字</view>
            <view>关键字</view>
            <view>关键字</view>
          </view>
        </view>
        <!-- 热门 -->
        <view>
          <view class="grace-h5">热门搜索</view>
          <view class="grace-tips">
            <view>关键字1</view>
            <view>关键字2</view>
            <view>关键字3</view>
          </view>
        </view>
      </view>
    </view>
</template>
<script>
export default {
  data() {
    return {
      searchKey: "",
      searchClose: false
    };
  },
  methods: {
    searchChange: function(e) {
      var key = e.detail.value;
      this.searchKey = key;
      if (key.length >= 1) {
        this.searchClose = true;
      } else {
        this.searchClose = false;
      }
    },
    clearKey: function() {
      this.searchClose = false;
      this.searchKey = "";
    },
    searchNow: function() {
      uni.showToast({
        title: "开始搜索 " + this.searchKey,
        icon: "none"
      });
    },
    handleBack() {
      uni.navigateBack();
    }
  },
  mounted() {},


};
</script>
<style lang="scss" scoped>
@import "../styles/global/index";
page {
  background: #fff;
}

.serach-wrap {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #fff;
  z-index: 10;
  // .grace-gradient-bg {
  //   background: #2081CE;
  // }
  .grace-search {
    display: flex;
    align-items: center;
  }
  input::-webkit-input-placeholder{
    color:red;
  }
  .icon-arrow-left {
    padding: 20upx;
  }
  .grace-search-in {
    display: flex;
    align-items: center;
  }
  .search {
    width: 140upx;
    text-align: center;
    font-size: 30upx;
  }
}

.content {
  padding: 0 40upx;
}

</style>